<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户验证表单</title>
   <!-- <link rel="stylesheet" href="../css/icon1.css"> -->
   <link rel="stylesheet" href="../css/iconfont.css">

   <style>
    input {
        
        outline: none;
    }
    span {
        color: gray;
        font-size: 14px;
    }
    i {
        vertical-align: middle;
    }
   </style>
   <!-- 
    括号总结
    1. 大括号  量词符。里面表示重复次数
    2. 中括号  字符集合。匹配方括号中的任意字符。
    3. 小括号  表示优先级
    -->
</head>
<body>
    <input type="text"  value="">
    <span class="name">请输入用户名</span>
    <i class="iconfont icon-iconfontgantanhao"></i>
    <!-- <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gantanhao"></use>
    </svg> -->
</body>
<!-- <script src="../js/iconfont.js"></script> -->
<script>
    var ipt = document.querySelector('input')
    var i = document.querySelector('i')
    var span  =document.querySelector('.name')
    var rg = /^[a-zA-Z1-9_-]{6,16}$/
    ipt.onblur = function(){
        if(rg.test(this.value)){
            console.log('用户名输入正确');
            span.innerHTML = '用户名输入正确'
            i.className = 'iconfont icon-zhengque1'
        }else {
            console.log('用户名输入错误');
            span.innerHTML = '用户名输入错误'
            i.className = 'iconfont icon-cuowu1'
        }
    }

    console.log('---------------------------------------');
    // 案例：座机号验证
    // 座机号码验证:  全国座机号码  两种格式:   010-12345678  或者  0530-1234567
    // 正则里面的或者 符号  |
    // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
    var reg = /^\d{3,4}-\d{7,8}$/;
    console.log(reg);


</script>
<!-- 
    思路：

    用户名输入正确，显示图片为绿色的，且表单里的value改为用户名输入正确
    用户名输入错误，显示图片为红色的，且表单里的value改为用户名不正确，请重新输入

    用户名：由字母，数字，下划线，多横线组成，并且长度为6-16
    表单失去焦点就开始验证
    如果符合规范开始改变图片
 -->

 <!-- 
    预定义类指的是某些常见模式的简写方式
    \d      匹配0-9之间的任一数字
    \D      匹配0-9以外的字符
    \w      匹配任意字母数字下划线
    \W      除所有字母数字下划线以外的的字符
    \s      匹配空格（包括换行符，制表符，空格符）
    \S      匹配非空格字符
  -->
</html>